<template>
  <Modal
    :visible="visible"
    :title="`Medal Details - ${nftIndex}`"
    :centered="true"
    width="375px"
    :footer="false"
    :closeIcon="renderCloseIcon()"
    @cancel="$emit('close')"
  >
    <div class="nft-details" v-show="policyDetailsShow">
      <div class="nft-details-items">
        <div class="nft-details-key">Origin Protection For</div>
        <div class="nft-details-v">{{ poolName }}</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Locked Liquidity</div>
        <div class="nft-details-v">{{ liquidity }} USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Withdrawable Amount</div>
        <div class="nft-details-v">0 USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Get Medal At</div>
        <div class="nft-details-v">2022-11-18</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Medal Level</div>
        <div class="nft-details-v">Normal</div>
      </div>
    </div>

    <div class="handle-buttons-container" v-show="policyDetailsShow">
      <Button class="handle-button-ant" type="primary" @click="applyForClaim()"
        >Transfer</Button
      >
      <Button class="handle-button-ant" type="primary">Remove Liquidity</Button>
    </div>

    <!-- claim sheet from here -->

    <div class="nft-details claim-sheet" v-show="claimSheetShow">
      <div class="nft-details-items">
        <div class="nft-details-key">Transfer to</div>
        <div class="nft-details-v">
          <input
            type="text"
            oninput="value=value.replace(/[g-wyzG-WYZ]/g,'')"
            maxlength="42"
          />
        </div>
      </div>

      <div class="transfer-explain">
        <span class="alarm">Alarm:</span>Once you transfer your Medal Nft to
        another address,Meta Defender protocol will automotically caculate
        current withdrawable cash which belongs to you and have them paid into
        your account. Which means this part of cash wont be tranfered together
        to the Nft recipient.
      </div>
    </div>

    <div class="handle-buttons-container" v-show="claimSheetShow">
      <Button class="handle-button-ant" type="primary" @click="doTransfer()"
        >Transfer</Button
      >
      <Button class="handle-button-ant" type="primary" @click="backToDetails()"
        >Back</Button
      >
    </div>
  </Modal>
</template>

<script>
import { Modal, Button } from "ant-design-vue";
import CloseIcon from "@/assets/close-icon.svg";
export default {
  components: {
    Modal,
    Button,
  },
  props: [
    "content",
    "visible",
    "nftIndex",
    "liquidity",
    "reward",
    "poolName",
    "poolAddress",
  ],
  data() {
    return {
      policyDetailsShow: true,
      claimSheetShow: false,
      handleNfts: "handle-nfts",
    };
  },
  methods: {
    renderCloseIcon() {
      return <img src={CloseIcon} alt="" />;
    },
    applyForClaim() {
      this.policyDetailsShow = false;
      this.claimSheetShow = true;
      this.handleNfts = "handle-nfts-nobackground";
    },
    backToDetails() {
      this.policyDetailsShow = true;
      this.claimSheetShow = false;
      this.handleNfts = "handle-nfts";
    },
    async doTransfer() {},
  },
};
</script>

<style lang='less' scoped>
</style>